// 这是新增计划有咩那  ****************  **************** **************** ****************
import { IRouteComponentProps } from "umi"
import React, { useState, useContext, useEffect } from "react";
// 引入仓库
import storeContext from "@/context/storeContext";
// 引入样式
import { Table } from "antd";
import style from "./planList.less";
// 与mobx建立联系
import { observer } from "mobx-react-lite";
import { Button, Input, Modal, Breadcrumb, message, Space } from "antd";
import { PlusOutlined, SearchOutlined, DeleteOutlined, EyeOutlined } from "@ant-design/icons"
// 引入请求 
import { getClassInfo, getPlanLists, getdelect } from "@/services/index";
import { planLists, palnsList } from "@/utils"

// 引入跳转页面
import { NavLink } from "umi"

const planList: React.FC<IRouteComponentProps> = ({ history }) => {
    //删除的弹框 
    const [isModalVisible, setIsModalVisible] = useState(false);
    // 班级
    let [grade, setgrade] = useState(["全部", "网站2021A班"]);
    let [headerlist, setHeaderList] = useState(["未开始", "进行中", "已结束"])
    // 高亮
    let [active, setactive] = useState(0);
    // 进行中的切换 
    let [active1, setactive1] = useState(1)
    // 数据库练习
    let { planList } = useContext(storeContext);
    // 设置params
    let [queryParams, setQueryParams] = useState<palnsList>({ classId: "9", searchName: "", ifFinished: 1, pageNum: 1, pageSize: 10, } as palnsList)
    // 设置实训管理初始化数据
    let [planLists, setPlanLists] = useState<planLists[]>()
    // 搜索的数据
    let [search, setSearch] = useState("");
    let [search1, setSearch1] = useState("");
    // 默认的id
    let [idss, setIdss] = useState("")
    // 发起数据请求
    useEffect(() => {
        planList.getClassInfo()
    }, [])
    // 发起表格请求
    useEffect(() => {
        if (active1) {
            queryParams = { ...queryParams, classId: "", searchName: "", ifFinished: active1 }
        } else {
            queryParams = { ...queryParams, classId: "", searchName: "", ifFinished: 0 }
        }
        getPlanLists(queryParams).then((ok) => {
            setPlanLists(ok.rows)
        })
    }, [active, active1])
    // 搜索的请求
    useEffect(() => {
        if (search1) {
            queryParams = { ...queryParams, classId: "", searchName: search1, ifFinished: active1 }
        } else {
            queryParams = { ...queryParams, classId: "", searchName: "", ifFinished: 1 }
        }
        getPlanLists(queryParams).then((ok) => {
            setPlanLists(ok.rows)
        })
    }, [search1])
    // 点击开启弹框
    const showModal = (id: string) => {
        setIsModalVisible(true);
        setIdss(id);
    };
    // 确认深处
    const handleOk = () => {
        getdelect(idss).then((ok) => {
            if (ok.status === "0") {
                message.error(`${ok.msg}`);
            }

        })
        setIsModalVisible(false);
    };
    //关闭弹框
    const handleCancel = () => {
        setIsModalVisible(false);
    };

    // 定义表格样式 
    const columns = [
        {
            title: '班级',
            key: 'id',
            align: 'center' as 'center',
            render: (className: planLists) => (
                <div>
                    <p><span style={{ fontSize: "15px" }}>{className.className}</span></p>
                    <p><span style={{ fontSize: "18px" }}>{className.planname}</span></p>
                </div>
            ),
        },
        {
            title: "时间",
            key: 'id',
            align: 'center' as 'center',
            render: (className: planLists) => (
                <div>
                    <p style={{ textAlign: "center" }}><span style={{ fontSize: "14px", color: "#cccc" }}> 据结束还剩 </span><span style={{ fontSize: "22px" }}> {className.surplusTime}</span> </p>
                    <p style={{ textAlign: "center" }}><span style={{ fontSize: "14px", color: "#cccc" }}> 开始 </span><span>  {className.begintime}</span> </p>
                    <p style={{ textAlign: "center" }}><span style={{ fontSize: "14px", color: "#cccc" }}> 结束 </span><span>{className.endtime}</span></p>
                </div>
            ),
        },
        {
            title: "进度",
            key: 'id',
            align: 'center' as 'center',
            render: (className: planLists) => (
                <div>
                    {
                        className.progress === "0" ?
                            <p><span style={{ fontSize: "20px", color: "#cccc" }}> {className.progress}%</span> </p>
                            : <p><span style={{ fontSize: "20px", color: "orangered" }}>{className.progress}%</span> </p>
                    }
                </div>
            ),
        },
        {
            title: "操作",
            key: 'id',
            align: 'center' as 'center',
            render: (_className: planLists) => (
                <div>
                    <Space >
                        <span><DeleteOutlined onClick={(e) => {
                            e.stopPropagation()
                            showModal(_className.id)
                        }} style={{ margin: "0px 10px", fontSize: '16px', color: '#08c' }} /></span>
                    </Space>,
                    <span>
                        <NavLink to={`/teachers/training/training?plan_id=${_className.id}&class_id=${_className.classid}`}>
                            <EyeOutlined style={{ margin: "0px 10px", fontSize: '16px', color: '#08c' }} />
                        </NavLink>
                    </span>
                </div>
            ),
        },
    ]
    // 弹框 

    return <div className={style.teacher_pages}>
        <div className={style.header}>
            <div className={style.planList_headers}>
                <Breadcrumb style={{ padding: "16px", margin: "5px 0 0 22px", fontSize: "15px" }}>
                    <Breadcrumb.Item>计划</Breadcrumb.Item>
                    <Breadcrumb.Item>计划管理</Breadcrumb.Item>
                </Breadcrumb>
            </div>
        </div>
        <div className={style.main}>
            <div className={style.planList_main}>
                <div className={style.train_resource}>
                    <div className={style.resource_type}>
                        <div className={style.r_t_title}>班级：</div>
                        <div className={style.r_t_list}>
                            {
                                grade.map((item, index) => {
                                    return <span key={index} className={active === index ? style.active : ""} onClick={() => {
                                        setactive(index)
                                    }}>{item}</span>
                                })
                            }
                        </div>
                    </div>
                </div>
                <div className={style.cont}>
                    <div className={style.plan_cont}>
                        <div className={style.input_tab}>
                            <div className={style.el_radio_group}>
                                {
                                    headerlist.map((item, index) => {
                                        return <span key={index} className={active1 === index ? style.active1 : ""} onClick={() => {
                                            setactive1(index);
                                        }}>{item}</span>
                                    })
                                }
                            </div>
                            <NavLink to="/teachers/addplan/addplan">
                                <Button type="primary" style={{ width: "117px", height: "36px", fontSize: "16px" }} icon={<PlusOutlined />}>
                                    添加计划
                                </Button>
                            </NavLink>

                            <Input
                                onChange={(e) => {
                                    setSearch(e.target.value)
                                }}
                                placeholder="搜索岗位/项目/任务"
                                suffix={<SearchOutlined onClick={() => {
                                    setSearch1(search)
                                }} />}
                                style={{ width: "208px", height: "36px", marginRight: "65px" }}></Input>
                        </div>
                        <Table rowKey="stationId" dataSource={planLists} columns={columns} />
                        {/* 删除 */}
                        <Modal title="Basic Modal" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
                            <p style={{ fontSize: "20px" }}>您确定要删除吗</p>
                        </Modal>
                    </div>

                </div>
            </div>
        </div>
    </div>
}

export default observer(planList)
// 新增计划页面结束  **************** ****************  **************** ****************